<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <image src="/static/ic_search.png" mode=""></image>
        <input type="text" placeholder="搜索联系人" @input="onSearchInput" />
      </view>
    </view>

    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-item" @click="navigateToDept(null)">
        <text>全部部门</text>
        <image v-if="currentDeptId !== null" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
      <view v-for="(dept, index) in getDeptPath" :key="index" class="nav-item">
        <text>{{ dept.name }}</text>
        <image v-if="index < getDeptPath.length - 1" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
    </view>

    <!-- 部门列表 -->
    <view class="dept-list">
      <view 
        v-for="(dept, index) in currentDept.children || []" 
        :key="index" 
        class="dept-item"
        @click="navigateToDept(dept.id)"
      >
        <image class="dept-icon" src="/static/ic_dept.png" mode=""></image>
        <view class="dept-info">
          <text class="dept-name">{{ dept.name }}</text>
          <text class="dept-count">{{ dept.members.length + (dept.children ? dept.children.reduce((total, child) => total + child.members.length, 0) : 0) }}人</text>
        </view>
        <image class="arrow-icon" src="/static/ic_arrow_right.png" mode=""></image>
      </view>
    </view>

    <!-- 成员列表 -->
    <view class="member-section">
      <view class="section-title">当前部门成员</view>
      <view class="member-list">
        <view 
          v-for="(member, index) in currentDept.members || []" 
          :key="index" 
          class="member-item"
          @click="openMemberDetail(member.id)"
        >
          <image class="member-avatar" :src="member.avatar" mode=""></image>
          <view class="member-info">
            <text class="member-name">{{ member.name }}</text>
            <text class="member-position">{{ member.position }}</text>
          </view>
          <image class="contact-icon" src="/static/ic_chat.png" mode="" @click.stop="startChat(member.id)"></image>
        </view>
      </view>
    </view>

    <!-- 常用联系人 -->
    <view class="frequent-section">
      <view class="section-title">常用联系人</view>
      <view class="frequent-list">
        <view 
          v-for="(member, index) in frequentMembers" 
          :key="index" 
          class="frequent-item"
          @click="openMemberDetail(member.id)"
        >
          <image class="frequent-avatar" :src="member.avatar" mode=""></image>
          <text class="frequent-name">{{ member.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      currentDeptId: null,
      deptList: [
        {
          id: 1,
          name: '郑州市监管局',
          parentId: null,
          members: [
            { id: 101, name: '张大山', position: 'CEO', avatar: '/static/avatar1.png', dept: '郑州市监管局' },
            { id: 102, name: '李思远', position: 'CTO', avatar: '/static/avatar2.png', dept: '郑州市监管局' },
            { id: 103, name: '王明亮', position: 'CFO', avatar: '/static/avatar3.png', dept: '郑州市监管局' }
          ],
          children: [
            {
              id: 101,
              name: '技术部',
              parentId: 1,
              members: [
                { id: 1011, name: '赵小刚', position: '技术总监', avatar: '/static/avatar4.png', dept: '技术部' },
                { id: 1012, name: '钱多多', position: '高级开发工程师', avatar: '/static/avatar5.png', dept: '技术部' }
              ],
              children: [
                {
                  id: 10101,
                  name: '前端开发组',
                  parentId: 101,
                  members: [
                    { id: 101011, name: '孙小美', position: '前端开发工程师', avatar: '/static/avatar6.png', dept: '前端开发组' },
                    { id: 101012, name: '周大鹏', position: 'UI设计师', avatar: '/static/avatar7.png', dept: '前端开发组' }
                  ]
                },
                {
                  id: 10102,
                  name: '后端开发组',
                  parentId: 101,
                  members: [
                    { id: 101021, name: '吴小华', position: '后端开发工程师', avatar: '/static/avatar8.png', dept: '后端开发组' },
                    { id: 101022, name: '郑成功', position: '架构师', avatar: '/static/avatar9.png', dept: '后端开发组' }
                  ]
                }
              ]
            },
            {
              id: 102,
              name: '市场部',
              parentId: 1,
              members: [
                { id: 1021, name: '冯小宁', position: '市场总监', avatar: '/static/avatar10.png', dept: '市场部' },
                { id: 1022, name: '陈大勇', position: '品牌经理', avatar: '/static/avatar11.png', dept: '市场部' }
              ]
            }
          ]
        },
        {
          id: 2,
          name: '监管一队',
          parentId: null,
          members: [
            { id: 201, name: '褚小明', position: '分公司总经理', avatar: '/static/avatar12.png', dept: '监管一队' }
          ],
          children: [
            {
              id: 201,
              name: '销售部',
              parentId: 2,
              members: [
                { id: 2011, name: '卫小红', position: '销售总监', avatar: '/static/avatar13.png', dept: '销售部' },
                { id: 2012, name: '蒋小华', position: '销售经理', avatar: '/static/avatar14.png', dept: '销售部' }
              ]
            },
            {
              id: 202,
              name: '财务部',
              parentId: 2,
              members: [
                { id: 2021, name: '沈小兰', position: '财务经理', avatar: '/static/avatar15.png', dept: '财务部' }
              ]
            }
          ]
        },
        {
          id: 3,
          name: '郑州市金水区监管局',
          parentId: null,
          members: [
            { id: 301, name: '韩小明', position: '分公司总经理', avatar: '/static/avatar16.png', dept: '郑州市金水区监管局' }
          ],
          children: [
            {
              id: 301,
              name: '行政部',
              parentId: 3,
              members: [
                { id: 3011, name: '杨小红', position: '行政主管', avatar: '/static/avatar17.png', dept: '行政部' }
              ]
            },
            {
              id: 302,
              name: '人力资源部',
              parentId: 3,
              members: [
                { id: 3021, name: '朱小刚', position: 'HR经理', avatar: '/static/avatar18.png', dept: '人力资源部' }
              ]
            }
          ]
        }
      ],
      frequentMembers: [
        { id: 101, name: '张大山', position: 'CEO', avatar: '/static/uUADqqq.png', dept: '郑州市监管局' },
        { id: 102, name: '李思远', position: 'CTO', avatar: '/static/uUADqqq.png', dept: '郑州市监管局' },
        { id: 1011, name: '赵小刚', position: '技术总监', avatar: '/static/uUADqqq.png', dept: '技术部' },
        { id: 1021, name: '冯小宁', position: '市场总监', avatar: '/static/uUADqqq.png', dept: '市场部' },
        { id: 201, name: '褚小明', position: '分公司总经理', avatar: '/static/uUADqqq.png', dept: '监管一队' }
      ]
    }
  },
  computed: {
    currentDept() {
      if (this.currentDeptId === null) {
        return {
          id: null,
          name: '全部部门',
          members: [],
          children: this.deptList
        };
      }
      
      return this.findDeptById(this.deptList, this.currentDeptId) || { id: null, name: '未知部门', members: [], children: [] };
    },
    getDeptPath() {
      const path = [];
      let currentId = this.currentDeptId;
      
      while (currentId !== null) {
        const dept = this.findDeptById(this.deptList, currentId);
        if (dept) {
          path.unshift(dept);
          currentId = dept.parentId;
        } else {
          break;
        }
      }
      
      return path;
    },
    filteredMembers() {
      if (!this.searchKeyword.trim()) {
        return this.currentDept.members || [];
      }
      
      const keyword = this.searchKeyword.trim().toLowerCase();
      return (this.currentDept.members || []).filter(member => 
        member.name.toLowerCase().includes(keyword) || 
        member.position.toLowerCase().includes(keyword)
      );
    },
    filteredDepts() {
      if (!this.searchKeyword.trim() || !this.currentDept.children) {
        return this.currentDept.children || [];
      }
      
      const keyword = this.searchKeyword.trim().toLowerCase();
      return this.currentDept.children.filter(dept => 
        dept.name.toLowerCase().includes(keyword) || 
        dept.members.some(member => 
          member.name.toLowerCase().includes(keyword) || 
          member.position.toLowerCase().includes(keyword)
        )
      );
    }
  },
  methods: {
    findDeptById(depts, id) {
      for (const dept of depts) {
        if (dept.id === id) {
          return dept;
        }
        
        if (dept.children && dept.children.length > 0) {
          const found = this.findDeptById(dept.children, id);
          if (found) {
            return found;
          }
        }
      }
      
      return null;
    },
    onSearchInput(e) {
      this.searchKeyword = e.detail.value;
    },
    navigateToDept(deptId) {
      this.currentDeptId = deptId;
      this.searchKeyword = ''; // 清空搜索词
    },
    openMemberDetail(memberId) {
      uni.navigateTo({
        url: `/pages/contact/detail?id=${memberId}`
      });
    },
    startChat(memberId) {
      // 开始聊天
      uni.navigateTo({
        url: `/pages/chat/chat?toUserId=${memberId}`
      });
    }
  }
}
</script>

<style>
.container {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.search-bar {
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: white;
}

.search-input {
  width: 100%;
  display: flex;
  align-items: center;
  background-color: #f5f7fa;
  border-radius: 40rpx;
  padding: 0 20rpx;
}

.search-input image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.search-input input {
  flex: 1;
  height: 60rpx;
  font-size: 26rpx;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: white;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 1rpx solid #eee;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  margin-right: 16rpx;
}

.nav-item text {
  font-size: 28rpx;
  color: #333;
  margin-right: 10rpx;
}

.nav-item image {
  width: 20rpx;
  height: 20rpx;
}

.dept-list {
  background-color: white;
  margin-top: 20rpx;
}

.dept-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.dept-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}

.dept-info {
  flex: 1;
}

.dept-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.dept-count {
  font-size: 24rpx;
  color: #999;
}

.arrow-icon {
  width: 24rpx;
  height: 24rpx;
}

.member-section {
  background-color: white;
  margin-top: 20rpx;
}

.section-title {
  font-size: 26rpx;
  color: #999;
  padding: 16rpx 30rpx;
  background-color: #f5f7fa;
}

.member-list {
  padding: 0 30rpx;
}

.member-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.member-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.member-info {
  flex: 1;
}

.member-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.member-position {
  font-size: 24rpx;
  color: #999;
}

.contact-icon {
  width: 40rpx;
  height: 40rpx;
}

.frequent-section {
  background-color: white;
  margin-top: 20rpx;
}

.frequent-list {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx 30rpx;
}

.frequent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 30rpx;
  margin-bottom: 20rpx;
}

.frequent-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
}

.frequent-name {
  font-size: 24rpx;
  color: #333;
  max-width: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>    